import { Component } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
import { log } from 'util';

@Component({
  selector: 'app-form-slide-up',
  templateUrl: './form-slide-up.component.html',
  styleUrls: ['./form-slide-up.component.scss'],
  animations: [
    trigger('backdropAnimation', [
      state(
        'false',
        style({
          opacity: '0',
        })
      ),
      state(
        'true',
        style({
          opacity: '1',
        })
      ),
      transition('false => true', animate('400ms ease-out')),
      transition('true => false', animate('400ms ease-in')),
    ]),
  ],
})
export class FormSlideUpComponent {
  isOpen = false;
  showForm = false;
  type = true;

  private formList: any[] = [
    { index: 1, show: 'none' },
    { index: 2, show: 'none' },
  ];

  toggle() {
    this.isOpen = !this.isOpen;
  }

  public isAnimationOptionsStateOpen = 0;

  // ...

  get formlist() {
    return this.formList;
  }

  public backdropStart(): void {
    console.log('start');
    this.formList.forEach((item) => {
      item.show = false;
      if (item.index === this.isAnimationOptionsStateOpen) {
        item.show = true;
      }
    });
  }

  public backDropDone(): void {
    console.log('done');
    // this.formList.forEach((item) => {
    //   item.show = false;
    //   if (item.index === this.isAnimationOptionsStateOpen) {
    //     item.show = true;
    //   }
    // });
  }

  onBtnClick(index: number) {
    this.type = !this.type;
    this.isOpen = !this.isOpen;

    this.isAnimationOptionsStateOpen = index;
    console.log('dianji');
    this.backdropStart();

    this.showForm = true;
  }
}
